<template>
  <div class="com-global-search-nav-bar w-flex-between-center">
    <a-tabs
      :default-active-key="navData"
      @prevClick="callback"
      @nextClick="callback"
      @change="navClick"
    >
      <a-tab-pane key="all" tab="所有" />
      <a-tab-pane v-for="item in types" :key="item" :tab="item" />
    </a-tabs>
    
    <a-input-group compact>
      <a-select v-if="searchBarOptions.length" v-model="searchBar.option">
        <a-select-option v-for="(v, k) in searchBarOptions" :key="k" :value="`${k}`">
          {{ v }}
        </a-select-option>
      </a-select>
      <a-input-search v-model="searchBar.key" style="width: 200px" @search="searchBtnClick" />
    </a-input-group>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

@Component({
  name: 'ComSearchBarOptionKey'
})
export default class ComSearchBarOptionKey extends Vue {
  @Prop({ type: Array, default: () => [] }) types!: Array<any>
  @Prop({ type: Array, default: () => [] }) searchBarOptions!: Array<any>

  navData: string = 'all'
  searchBar:any = {
    option: '0',
    key: ''
  }

  @Watch('$route.query')
  routerChange () {
    this.dataInit()
  }

  created () {
    this.dataInit()
  }

  navClick (item:any) {
    const query:any = Object.assign({}, this.$route.query)
    query.type = item
    query.pageNum = 1
    query.tage = new Date().getTime()
    this.$router.push({ path: this.$route.path, query })
  }

  searchBtnClick () {
    const query:any = { ...this.$route.query }
    query.searchType = this.searchBar.option
    query.searchKey = this.searchBar.key
    query.tage = new Date().getTime()
    this.$router.push({ path: this.$route.path, query })
  }

  dataInit () {
    this.navData = (this.$route.query.type || 'all') as string
    this.searchBar.option = this.$route.query.searchType
      ? this.$route.query.searchType
      : '0'
    this.searchBar.key = this.$route.query.searchKey
      ? this.$route.query.searchKey
      : ''
  }

  callback() {}
}
</script>

<style lang="less">
.com-global-search-nav-bar {
  margin-top: 10px;
  .ant-input-group {
    width: 293px;
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
